<template>
	<view class="container">
		<u-picker :show="show" ref="uPicker" :columns="columns" :title="title" @cancel="show = false"
			@confirm="confirm"></u-picker>
		<u-datetime-picker :minDate="newData" :show="dateTimeShow" mode="datetime" :title="title"
			@cancel="dateTimeShow = false" @confirm="checkDateTime"></u-datetime-picker>
		<view>
			<u--form labelPosition="left" :model="from" :rules="rules" ref="form1" labelWidth='120px'
				:labelStyle='labelStyle'>
				<view class="title">
					基础信息
				</view>
				<view class="box">
					<u-form-item label="作业票名称" prop="zypmc" borderBottom>
						<u--input v-model="from.zypmc" placeholder="输入作业票名称" border="none"></u--input>
					</u-form-item>
					<u-form-item label="作业申请单位" prop="zysqdw" borderBottom @click="itemClick('zysqdw','作业申请单位')">
						<u--input v-model="from.zysqdw" placeholder="选择作业申请单位" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="作业申请时间" prop="applyDate" borderBottom
						@click="dateTimeShow =true,dateTimeType=1,title='作业申请时间'">
						<u--input v-model="from.applyDate" placeholder="选择作业申请时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="作业实施时间" prop="workImplementDate" borderBottom
						@click="dateTimeShow =true,dateTimeType=2,title='作业实施时间'">
						<u--input v-model="from.workImplementDate" placeholder="选择作业实施时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<user-pick :label="'监护人'" :multiple="false" :placeholder="'请选择监护人'" v-model="from.jhr"
						:prop="'jhr'"></user-pick>
					<view style="color: #838383;padding: 10px 0">作业内容</view>
					<u--textarea v-model="from.zynr" placeholder="请输入..." height="120" confirmType="next"
						style="margin-bottom: 15px;background: #f6f6f6" count :maxlength="500"></u--textarea>
					<u-form-item label="作业地点" prop="zydd" borderBottom>
						<u--input v-model="from.zydd" placeholder="选择作业地点" border="none"></u--input>
					</u-form-item>
					<u-form-item label="作业单位" prop="zydw" borderBottom @click="itemClick('zydw','作业单位')">
						<u--input v-model="from.zydw" placeholder="选择作业单位" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<user-pick :label="'作业负责人'" :title="'作业负责人'" :multiple="false" :placeholder="'请选择作业负责人'"
						v-model="from.zyfzr" :prop="'zyfzr'"></user-pick>
				</view>

				<view class="title">
					作业简图
				</view>
				<view class="box" style="padding-bottom: 10px">
					<u-form-item label="作业简图" prop="text" borderBottom>
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="4"></u-upload>
					</u-form-item>
					<view style="color: #838383;padding: 10px 0">作业范围</view>
					<u--textarea v-model="from.zyfw" placeholder="请输入作业范围、作业方式、作业方式、作业面积" height="120"
						confirmType="next" style="padding-bottom: 15px;background: #f6f6f6" count :maxlength="500">
					</u--textarea>
					<!--					<u-form-item label="作业范围" prop="zyfw" borderBottom>-->
					<!--						<u&#45;&#45;input v-model="from.zyfw" placeholder="输入作业范围" border="none"></u&#45;&#45;input>-->
					<!--					</u-form-item>-->
					<!--					<u-form-item label="作业方式" prop="zyfs" borderBottom>-->
					<!--						<u&#45;&#45;input v-model="from.zyfs" placeholder="输入作业方式" border="none"></u&#45;&#45;input>-->
					<!--					</u-form-item>-->
					<!--					<u-form-item label="作业深度" prop="zysd" borderBottom>-->
					<!--						<u&#45;&#45;input v-model="from.zysd" placeholder="输入作业方式" border="none"></u&#45;&#45;input>-->
					<!--					</u-form-item>-->
					<!--					<u-form-item label="作业面积" prop="zymj">-->
					<!--						<u&#45;&#45;input v-model="from.zymj" placeholder="输入作业面积" border="none"></u&#45;&#45;input>-->
					<!--					</u-form-item>-->
				</view>
				<view class="title">
					关联特殊作业
				</view>
				<view class="box">
					<u-form-item label="关联特殊作业" prop="gltszy" @click="itemClick('gltszy','关联特殊作业')">
						<u--input v-model="from.gltszy" placeholder="选择关联特殊作业" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>


				<view class="title">
					危害辨识-安全措施
				</view>
				<view class="box" style="padding-bottom: 6px">
					<u-form-item label="危害辨识" prop="text" borderBottom @click="toHazardousFactors">
						<u--input v-model="from.text" placeholder="选择危害因素" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view
						style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
						<u-checkbox-group v-model="from.  harm" placement="column" :labelSize='32'>
							<u-checkbox activeColor="#53c21d" v-for="(item,index) in from.  harm" :label="item.label"
								:name="item.value" shape="circle" :key="index" style="padding: 10px 20px" :checked=true>
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<u-form-item label="安全措施" prop="text" borderBottom @click="toSafetyMeasures">
						<u--input v-model="from.text" placeholder="选择安全措施" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view
						style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
						<u-checkbox-group v-model="from.safetyMeasures" placement="column" :labelSize='32'>
							<u-checkbox activeColor="#53c21d" v-for="(item,index) in from.safetyMeasures"
								:label="item.label" :name="item.value" shape="circle" :key="index"
								style="padding: 10px 20px" :checked=true>
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<u-form-item label="个人用品防护" prop="text" borderBottom @click="toProtection">
						<u--input v-model="from.text" placeholder="选择个人用品防护" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view
						style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
						<u-checkbox-group v-model="from.personalProtection" placement="column" :labelSize='32'>
							<u-checkbox activeColor="#53c21d" v-for="(item,index) in from.personalProtection"
								:label="item.label" :name="item.value" shape="circle" :key="index"
								style="padding: 10px 20px" :checked=true>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="title">
					安全交底
				</view>
				<view class="box">
					<user-pick :label="'安全交底人'" :multiple="false" :title="'安全交底人'" :placeholder="'请选择安全交底人'"
						v-model="from.aqjdr" :prop="'aqjdr'"></user-pick>
					<user-pick :label="'接受交底人'" :multiple="false" :title="'接受交底人'" :placeholder="'请选择接受交底人'"
						v-model="from.jsjdr" :prop="'jsjdr'"></user-pick>
				</view>
				<!--				<view class="title">-->
				<!--					安全教育-->
				<!--				</view>-->
				<!--				<view class="box">-->
				<!--					<u-form-item label="实施安全教育人" prop="text" borderBottom>-->
				<!--						<u&#45;&#45;input v-model="from.text" placeholder="选择实施安全教育人" border="none"></u&#45;&#45;input>-->
				<!--						<u-icon slot="right" name="arrow-right"></u-icon>-->
				<!--					</u-form-item>-->
				<!--					<u-form-item label="是否已实施" prop="text" borderBottom>-->
				<!--						<u&#45;&#45;input v-model="from.text" placeholder="选择是否已实施" border="none"></u&#45;&#45;input>-->
				<!--						<u-icon slot="right" name="arrow-right"></u-icon>-->
				<!--					</u-form-item>-->
				<!--				</view>-->
				<view class="title">
					审核人/审核部门
				</view>
				<view class="box">
					<user-pick :label="'作业负责人意见'" :multiple="false" :title="'作业负责人意见'" :placeholder="'请选择作业负责人'"
						v-model="from.jsjdr" :prop="'jsjdr'"></user-pick>
					<user-pick :label="'所在单位'" :multiple="false" :title="'所在单位审批人'" :placeholder="'请选择所在单位审批人'"
						v-model="from.spr" :prop="'spr'"></user-pick>
					<user-pick :label="'供水部门意见'" :multiple="false" :title="'供水部门审核人'" :placeholder="'选择供水部门审核人'"
						v-model="from.gsbmspr" :prop="'gsbmspr'"></user-pick>
					<user-pick :label="'配电部门意见'" :multiple="false" :title="'配电部门审核人'" :placeholder="'选择配电部门审核人'"
						v-model="from.pdbmshr" :prop="'pdbmshr'"></user-pick>
					<user-pick :label="'供气部门意见'" :multiple="false" :title="'供气部门审核人'" :placeholder="'选择供气部门审核人'"
						v-model="from.gqbmshr" :prop="'gqbmshr'"></user-pick>
					<user-pick :label="'工艺部门意见'" :multiple="false" :title="'工艺部门审核人'" :placeholder="'选择工艺部门审核人'"
						v-model="from.gybmshr" :prop="'gybmshr'"></user-pick>
					<user-pick :label="'设备部门意见'" :multiple="false" :title="'设备部门审核人'" :placeholder="'选择设备部门审核人'"
						v-model="from.sbbmshr" :prop="'sbbmshr'"></user-pick>
					<user-pick :label="'消防部门意见'" :multiple="false" :title="'消防部门审核人'" :placeholder="'选择消防部门审核人'"
						v-model="from.xfbmshr" :prop="'xfbmshr'"></user-pick>
					<user-pick :label="'安全部门意见'" :multiple="false" :title="'安全部门审核人'" :placeholder="'选择安全部门审核人'"
						v-model="from.aqbmshr" :prop="'aqbmshr'"></user-pick>
					<user-pick :label="'审批部门意见'" :multiple="false" :title="'安全部门审核人'" :placeholder="'选择安全部门审核人'"
						v-model="from.spbmyj" :prop="'spbmyj'"></user-pick>
				</view>
				<view class="title">
					验收
				</view>
				<view class="box">
					<user-pick :label="'验收人'" :multiple="false" :title="'验收人'" :placeholder="'选择验收人'" v-model="from.ysr"
						:prop="'ysr'"></user-pick>
				</view>
			</u--form>
			<u-button type="primary" text="申请" @click="submit" class='but'></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import userPick from "@/pages/Components/userPick";
	import {
		getDepartmentAPI,
		groundBreakTicketListAPI,
		applybreakGroundWorkAPI,
		aboutWorkAPI,
		electricalWorkAPI
	} from "@/api/api.js"
	import {
		URL
	} from '../../../api/request.js'
	export default {
		components: {
			userPick,
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			let brand = currPage.brand
			if (!!brand) {
				if (brand.option) {
					this.from.harm = brand.option
					this.from.whbs = brand.optionList.toString()
				} else if (brand.list) {
					this.from.safetyMeasures = brand.list
					this.from.aqcs = brand.idList.toString()
				} else if (brand.fh) {
					this.from.personalProtection = brand.fh
					this.from.grypfh = brand.fhlist.toString()
				}
			}
		},
		data() {
			return {
				fileList1: [],
				show: false,
				dateTimeShow: false,
				title: '',
				temKey: '',
				dateTimeType: 0,
				columns: [],
				newData: new Date().getTime(),
				labelStyle: {
					color: '#666'
				},
				from: {
					harm: [],
					safetyMeasures: [],
					personalProtection: [],
					whbs: '',
					aqcs: '',
					grypfh: '',
					text: '',
					zypmc: '',
					applyDate: '',
					zysqsj: '',
					workImplementDate: '',
					zysssj: '',
					zynr: '',
					zydw: '',
					urlList: [],
					fj: '',
					zyfw: ''
				},
				rules: {},
				obj: {}
			};
		},
		methods: {
			submit() {
				this.from.fj = this.from.urlList.toString()
				console.log(this.from)
				applybreakGroundWorkAPI({}).then((r) => {
					if (r.code === 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: "作业票申请成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
						})
						setTimeout((e)=>{
							uni.navigateBack({
								delta: 1
							})
						},2000)
					}
				})
			},
			itemClick(key, title) {
				if (key === 'zysqdw' || key === 'zydw' || key === 'szdw') {
					this.show = true
					this.title = title
					this.temKey = key
					getDepartmentAPI({}).then((r) => {
						let msg = r.data.map((e) => {
							return e.deptName
						})
						this.columns = [msg]
					})
				} else if (key === 'gltszy') {
					this.show = true
					this.title = title
					this.temKey = key
					groundBreakTicketListAPI({}).then((r) => {
						let msg = r.data.map((e) => {
							return e.zypmc;
						});
						this.columns = [msg];
					});
				} else {
					this.show = true
					this.title = title
					this.temKey = key
					this.columns = this.obj[key]
				}
			},
			checkDateTime(e) {
				const timeFormat = uni.$u.timeFormat
				switch (this.dateTimeType) {
					case 1:
						this.from.applyDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						this.from.zysqsj = timeFormat(e.value, 'yyyymmddhhMM')
						break;
					case 2:
						this.from.workImplementDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						this.from.zysssj = timeFormat(e.value, 'yyyymmddhhMM')
						break;
					case 3:
						this.from.analysisDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						this.from.fxsj = timeFormat(e.value, 'yyyymmddhhMM')
						break;
				}
				this.dateTimeShow = false
			},
			confirm(e) {
				this.from[this.temKey] = e.value[0]
				// this.from[this.temKey]==='待实施'?this.from.sfyss='0':this.from.sfyss='1'
				this.show = false
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			//新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: URL + '/common/upload',
						filePath: url,
						name: 'file',
						header: {
							'Authorization': `Bearer ${uni.getStorageSync('token')}`
						},
						formData: {
							user: 'file'
						},
						success: (res) => {
							this.from.urlList.push(JSON.parse(res.data).url.toString())
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			toProtection() {
				uni.navigateTo({
					url: '../HotWork/protection/protection'
				})
			},
			toHazardousFactors() {
				uni.navigateTo({
					url: '../HotWork/hazardousFactors/hazardousFactors'
				})
			},
			toSafetyMeasures() {
				uni.navigateTo({
					url: '../HotWork/safetyMeasures/safetyMeasures'
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 24rpx;
		background-color: #f6f6f6;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			line-height: 44rpx;
			padding: 20rpx 48rpx;
		}

		.box {
			padding: 0rpx 48rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}

	.but {
		margin: 30rpx 0;
	}
</style>
